<template>
  <div class="page46" v-loading="loading">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png" /></div>
    <div class="heading">
      收入分析：<span class="redTitle">分产品、分专业收入拉动情况</span>
    </div>
    <div class="content">
      <div class="title">
        {{ acctMonth }}同比增长各{{
          currentLvlName
        }}分产品、分专业收入拉动因素情况
      </div>
      <div class="tableBox">
        <el-table
          border
          stripe
          style="width: 100%"
          class="tableTh28"
          ref="table"
          :data="tableData"
          :span-method="arraySpanMethod"
        >
          <el-table-column
            label="分产品 分专业"
            prop="indexClass"
            class-name="first-title"
            min-width="20"
          ></el-table-column>
          <el-table-column
            label="分产品 分专业"
            prop="indexName"
            class-name="second-title"
            min-width="70"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in cloList"
            :prop="'ldIncome' + index"
            :label="item"
            :key="index"
            min-width="40"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row['ldIncome' + index] > 0"
                style="color: #5585bf"
                >{{ scope.row["ldIncome" + index] }}</span
              >
              <span v-else style="color: #c00000">{{
                scope.row["ldIncome" + index]
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="contentBottom">
        <div class="growthRate">
          <div class="marg">
            <span class="weightFont"
              ><span class="lingxing"></span>基本面收入负拉动：</span
            >
          </div>
          <div class="marg">
            <span class="normalFont sign"
              >基本面收入同比{{ basicTbYearIncreaseAmt }}亿元,<span
                class="normalRedFont"
                >{{ basicLdIncome }}pp</span
              ></span
            >
          </div>
        </div>
        <div class="growthRate">
          <div class="marg">
            <span class="weightFont"
              ><span class="lingxing"></span>产业数字化（省内）收入{{
                ldDesc
              }}：</span
            >
          </div>
          <div class="marg">
            <span class="normalFont sign"
              >产业数字化（省内）收入同比{{ dictTbYearIncreaseAmt }}亿元,<span
                class="normalRedFont"
                >{{ dictLdIncome }}pp</span
              ></span
            >
          </div>
        </div>
        <div class="growthRate">
          <div class="marg">
            <span class="weightFont"
              ><span class="lingxing"></span>各{{
                currentLvlName
              }}分专业收入拉动情况</span
            >
          </div>
          <div class="marg">
            <span class="normalFont sign"
              >基本面收入：<span class="normalRedFont">{{
                basicLastThreeArea
              }}</span
              ><span class="normalFont"
                >拉动排名{{ currentLvlName }}后三。</span
              ></span
            >
          </div>
          <div class="marg">
            <span class="normalFont weightFont"
              >移动收入<span class="normalRedFont"
                >{{ mobileLdIncome }}pp：</span
              ><span class="normalRedFont">{{ mobileLastThreeArea }}</span
              ><span class="normalFont"
                >拉动排名{{ currentLvlName }}后三。</span
              ></span
            >
          </div>
          <div class="marg">
            <span class="normalFont weightFont"
              >物联网<span class="normalRedFont"
                >{{ internetLdIncome }}pp：</span
              ><span class="normalRedFont">{{ internetLastThreeArea }}</span
              ><span class="normalFont"
                >拉动排名{{ currentLvlName }}后三。</span
              ></span
            >
          </div>
          <div class="marg">
            <span class="normalFont sign"
              >IDC收入：<span class="normalRedFont">{{ idcLastThreeArea }}</span
              ><span class="normalFont"
                >拉动排名{{ currentLvlName }}后三。</span
              ></span
            >
          </div>
          <div class="marg">
            <span class="normalFont sign"
              >行业云收入：<span class="normalRedFont">{{
                hyyLastThreeArea
              }}</span
              ><span class="normalFont"
                >拉动排名{{ currentLvlName }}后三。</span
              ></span
            >
          </div>
          <div class="marg">
            <span class="normalFont sign"
              >数字平台和大数据（省内）：<span class="normalRedFont">{{
                numberLastThreeArea
              }}</span
              ><span class="normalFont"
                >拉动排名{{ currentLvlName }}后三。</span
              ></span
            >
          </div>
          <div class="marg">
            <span class="normalFont sign"
              >组网专线：<span class="normalRedFont">{{ zwLastThreeArea }}</span
              ><span class="normalFont"
                >拉动排名{{ currentLvlName }}后三。</span
              ></span
            >
          </div>
          <div class="marg">
            <span class="normalFont sign"
              >物联网：<span class="normalRedFont">{{ wlwLastThreeArea }}</span
              ><span class="normalFont"
                >拉动排名{{ currentLvlName }}后三。</span
              ></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
export default {
  props: ["form", "currentLvlName"],
  data() {
    return {
      loading: false,
      basicTbYearIncreaseAmt: "",
      basicLdIncome: "",
      dictLdIncome: "",
      dictTbYearIncreaseAmt: "",
      ldDesc: "",
      mobileLdIncome: "",
      internetLdIncome: "",
      tableData: [],
      cloList: [],
      spanArr: [],
      ldIncomeData: [],
      ldIncomeEchart: {},
      tableData1: [],
      cloList1: [],
      basicLastThreeArea: "",
      mobileLastThreeArea: "",
      internetLastThreeArea: "",
      ictLastThreeArea: "",
      idcLastThreeArea: "",
      hyyLastThreeArea: "",
      numberLastThreeArea: "",
      zwLastThreeArea: "",
      wlwLastThreeArea: "",
      hlwLastThreeArea: "",
      acctMonth: "",
    };
  },
  created(){
    
  },
  methods: {
    // 或取
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    getData() {
      this.loading = true;
      $budgetAPI.getCountyOperationPage46(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        (res) => {
          if (res && res.code == 0) {
            this.acctMonth = res.content.acctMonth + "月";
            this.basicTbYearIncreaseAmt = this.upOrDown(
              res.content.basicTbYearIncreaseAmt,
              "减少",
              "增多"
            );
            this.basicLdIncome = this.upOrDown(
              res.content.basicLdIncome,
              "负拉动",
              "正拉动"
            );
            this.dictLdIncome = this.upOrDown(
              res.content.dictLdIncome,
              "负拉动",
              "正拉动"
            );
            this.dictTbYearIncreaseAmt = this.upOrDown(
              res.content.dictTbYearIncreaseAmt,
              "减少",
              "增多"
            );
            if (res.content.dictLdIncome > 0) {
              this.dictLdIncome = "正拉动" + res.content.dictLdIncome;
              if (res.content.dictLdIncome > 3) {
                this.ldDesc = "正拉动明显";
              } else {
                this.ldDesc = "正拉动";
              }
            } else {
              this.dictLdIncome = "负拉动" + Math.abs(res.content.dictLdIncome);
              if (res.content.dictLdIncome < -3) {
                this.ldDesc = "负拉动明显";
              } else {
                this.ldDesc = "负拉动";
              }
            }
            this.mobileLdIncome = this.upOrDown(
              res.content.mobileLdIncome,
              "负拉动",
              "正拉动"
            );
            this.internetLdIncome = this.upOrDown(
              res.content.internetLdIncome,
              "负拉动",
              "正拉动"
            );
            this.basicLastThreeArea = res.content.basicLastThreeArea;
            this.mobileLastThreeArea = res.content.mobileLastThreeArea;
            this.internetLastThreeArea = res.content.internetLastThreeArea;
            this.ictLastThreeArea = res.content.ictLastThreeArea;
            this.idcLastThreeArea = res.content.idcLastThreeArea;

            this.hyyLastThreeArea = res.content.hyyLastThreeArea;
            this.numberLastThreeArea = res.content.numberLastThreeArea;
            this.zwLastThreeArea = res.content.zwLastThreeArea;
            this.wlwLastThreeArea = res.content.wlwLastThreeArea;
            this.hlwLastThreeArea = res.content.hlwLastThreeArea;
            // 表格数据
            this.cloList = res.content.areaNames;
            res.content.localNetDataList.map((item, index) => {
              item.dataList.map((ele, ind) => {
                item["ldIncome" + ind] = ele.ldIncome;
              });
            });
            this.tableData = res.content.localNetDataList;
            this.spanArr = mergeSpan(this.tableData, [
              "indexClass",
              "indexName",
            ]);
            // 柱状图数据
            let obj = {
              xAxis: [],
              yAxis: [],
            };
            res.content.proAndMajorDataList.map((item, index) => {
              obj.xAxis[index] = item.indexName;
              obj.yAxis[index] = item.tbYearIncreaseAmt;
              this.ldIncomeData[index] = item.ldIncome;
            });
            for (let i = 0; i < this.ldIncomeData.length; i++) {
              if (i == 0 || i == this.ldIncomeData.length - 1) {
                this.ldIncomeData[i] = this.ldIncomeData[i] + "%";
              } else {
                this.ldIncomeData[i] = this.ldIncomeData[i] + "pp";
              }
            }
            this.ldIncomeEchart = obj;
            let date1 = {};
            res.content.proAndMajorDataList.map((item, index) => {
              this.cloList1[index] = item.indexName;
              date1["indexClass" + index] = item.indexClass;
            });
            this.tableData1.push(date1);
          } else {
            this.alertError(res);
          }
          this.loading = false;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          })
        },
        (err) => { this.loading = false; }
      );
    },
    upOrDown(ele, downTitle, upTitle) {
      if (ele == "" || ele == null) {
        ele = "";
      } else {
        if (ele > 0) {
          ele = upTitle + ele;
        } else {
          ele = downTitle + ele * -1;
        }
      }
      return ele;
    },
  },
};
</script>

<style lang="scss" scoped>
.page46 {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  position: relative;
  .logoBg {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .heading {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;
    .redTitle {
      color: #c00000;
    }
  }
  .content {
    .contentBottom {
      display: inline-block;
      height: 100%;
      margin-right: 10px;
      .growthRate {
        margin-bottom: 40px;
        .marg {
          margin-bottom: 10px;
          .weightFont {
            font-size: 18px;
            font-weight: 700;
            .lingxing {
              width: 10px;
              height: 10px;
              background-color: #c00000;
              transform: rotate(45deg);
              -ms-transform: rotate(45deg);
              /* Internet Explorer */
              -moz-transform: rotate(45deg);
              /* Firefox */
              -webkit-transform: rotate(45deg);
              /* Safari 和 Chrome */
              -o-transform: rotate(45deg);
              /* Opera */
              margin-right: 7px;
              display: inline-block;
            }
          }
          .normalFont {
            font-size: 16px;
            &.weightFont {
              padding-left: 20px;
              display: inline-block;
              position: relative;
              font-weight: 700;
              &::before {
                content: "-";
                color: #333;
                position: absolute;
                left: 0;
              }
            }
            &.sign {
              padding-left: 20px;
              display: inline-block;
              position: relative;
              &::before {
                content: "\2714";
                color: #333;
                position: absolute;
                left: 0;
              }
            }
          }
          .normalBuleFont {
            font-size: 16px;
            color: #5585bf;
          }
          .normalRedFont {
            font-size: 16px;
            color: #c00000;
          }
          .weightRedlFont {
            font-size: 16px;
            color: #c00000;
            font-weight: 700;
          }
        }
      }
    }
    .title {
      font-size: 16px;
      font-weight: 700;
      text-align: center;
    }
    .tableBox {
      margin-right: 10px;
      margin-top: 10px;
      border-top: 1px solid #9abcf1;
      border-left: 1px solid #bfbfbf;
      border-right: 1px solid #bfbfbf;
      border-bottom: 1px solid #bfbfbf;
      /deep/ .el-table.tableTh28 .has-gutter {
        .cell {
          padding: 0px !important;
          line-height: normal !important;
        }
      }
      /deep/ .el-table.tableTh28 {
        .cell {
          padding: 5px !important;
          line-height: normal !important;
        }
        th {
          font-size: 12px;
          height: 23px;
          padding: 0;
          .cell {
            line-height: 20px;
          }
        }
        /deep/ tr.el-table__row td {
          font-size: 12px;
          padding: 0 !important;
        }
      }
      /deep/ .tableTh28 .el-table__header {
        .first-title.is-leaf {
          position: relative;
          border-right: 1px solid #d7e5fb !important;
          .cell {
            color: #d7e5fb;
          }
        }
        .second-title.is-leaf {
          overflow: visible;
          .cell {
            width: 200%;
            left: -75%;
          }
        }
      }
      /deep/ .el-table tr:last-child td {
        color: #333;
        text-align: center;
        border-bottom: 1px solid transparent !important;
        border-right: 1px solid #bfbfbf !important;
      }
    }
  }
}
</style>
